		<template>
			<view class="relative contain" :style="`height: ${screenHeight}px;`">
				<view class="absolute pb-4 form">
					<!-- 登录 -->
					<view class=" login" v-if="isLogin">
						<uv-form labelPosition="left" :model="loginForm" ref="form">
							<uv-form-item prop="loginForm.name" borderBottom>
								<uv-input prefixIcon="account-fill" prefixIconStyle="font-size: 22px;color: #19cfc2"
									color="#6b7280" clearable placeholder="请输入手机号/邮箱/用户名" v-model="loginForm.loginName"
									border="none">
								</uv-input>
							</uv-form-item>
							<uv-form-item prop="loginForm.password" borderBottom>
								<uv-input prefixIcon="lock-fill" prefixIconStyle="font-size: 22px;color: #19cfc2" password
									clearable placeholder="请输入密码" v-model="loginForm.password" border="none">
								</uv-input>
							</uv-form-item>
						</uv-form>
						<uv-button class=" mt-8 " @click="handleLogin" :custom-style="customStyle" text="登录"></uv-button>
					</view>

					<!-- 注册 -->
					<view class=" register mt-10" v-else>
						<uv-form labelPosition="left" labelWidth="80" :model="registerForm" :rules="registerRules"
							ref="registerFormDom">
							<uv-form-item label="用户名" prop="userName" borderBottom>
								<uv-input color="#6b7280" placeholder="请输入用户名" v-model="registerForm.userName" border="none">
								</uv-input>
							</uv-form-item>
							<uv-form-item label="密码" prop="password" borderBottom>
								<uv-input password placeholder="请输入密码" v-model="registerForm.password" border="none">
								</uv-input>
							</uv-form-item><uv-form-item label="确认密码" prop="rePassword" borderBottom>
								<uv-input password placeholder="请再次输入密码" v-model="registerForm.rePassword" border="none">
								</uv-input>
							</uv-form-item><uv-form-item label="联系电话" prop="userPhone" borderBottom>
								<uv-input placeholder="请输入联系电话" v-model="registerForm.userPhone" border="none">
								</uv-input>
							</uv-form-item><uv-form-item label="邮箱" prop="email" borderBottom>
								<uv-input placeholder="请输入邮箱" v-model="registerForm.email" border="none">
								</uv-input>
							</uv-form-item>
						</uv-form>
						<uv-button class=" mt-8 " @click="register" :custom-style="customStyle" text="注册"></uv-button>
					</view>

					<view class="float-right mt-4 mb-8">
						<text :class="{ active: isLogin }" @click="switchTab(true)">登录</text>
						<text class="ml-1 mr-1 ">|</text>
						<text :class="{ active: !isLogin }" @click="switchTab(false)">注册</text>
					</view>

				</view>
			</view>
		</template>
		
		<script setup> 
		import md5 from 'js-md5'
		import { mapActions } from'pinia'
		import store from '@/store'
		
		const { user } = store()
		
		const loginForm = ref({
			password: '',
			loginName:''
		})
		const registerForm = ref({
			email: '',
			password: '',
			rePassword: '',
			userName: '',
			shopId:'1',
			userPhone: '',
		})
		const registerRules = ref({
			'userName': {
				type: 'string',
				required: true,
				message: '用户名不可为空',
				trigger: ['blur']
			},
			'password': [{
				type: 'string',
				required: true,
				message: '密码不可为空',
				trigger: ['blur']
			}],	
			'rePassword': [{
				type: 'string',
				required: true,
				message: '重复密码不可为空',
				trigger: ['blur']
			}, {
				// 自定义验证函数，见上说明，注意这里面的逻辑不能出现语法报错，否则可能导致不验证
				validator: (rule, value, callback) => {
					return this.registerForm.password ===  value
				},
				message: '两次密码不一致',
				trigger: ['blur'],
			}],
			'userPhone': [{
				type: 'number',
				required: true, 
				message: '手机号不可为空',
				trigger: ['blur']
			}, {
				pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
				message: '手机号格式错误',
				trigger: ['blur']
			}],
			'email': [{
				required: true,
				message: '邮箱不可为空',
				trigger: ['blur']
			}, {
				pattern: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
				message: '邮箱格式错误',
				trigger: ['blur']
			}],
		})
		const isLogin = ref(true)
		const account = ref('')
		const password = ref('')
		const registerRef = ref(null) // 表单对象
		
		const customStyle = computed(() => {
			return {
				height: '80rpx',
				background: '#1fd1c3',
				color: '#fff',
				borderRadius: '40rpx', //圆角
				// nvue中必须是下方的写法
				'border-top-right-radius': '40rpx',
				'border-bottom-left-radius': '40rpx',
				'border-bottom-right-radius': '40rpx'
			}
		})
		const screenHeight = computed(() => {
			return uni.getSystemInfoSync().windowHeight
		})
		const submitForm = () => {
			
		}
		const switchTab = (weather) => {
			isLogin.value = weather
			uni.setNavigationBarTitle({
				title: weather ? '登录' : '注册'
			});
		}
		// 登录
		const handleLogin = () => {
			user.login(loginForm.value).then(() => {
				uni.switchTab({
					url: '/pages/index/index' // 或者其他页面  
				});
			})
		}
		const register = () => {
			// 对整个表单进行校验
			registerRef.value.validate().then((res) => { // 成功返回，res 为表单数据 
				if(res) {
					user.register(registerForm.value).then(res => {
						isLogin.value = true
					})
				}
			}).catch(error => {
				console.log('表单校验验失败',  error); // 表单校验验失败 
			})
		}
		</script>

		<style scoped lang="scss">
			.contain {
				background: url(/src/static/img/login.jpg) no-repeat white;
				background-size: 100%;
			}

			.image {
				position: absolute;
				top: 0;
				left: 0;
				width: 100vw;
			}

			.card {
				width: 400px;
				height: 400px;
			}

			.active {
				color: #19cfc2;
			}

			.form {
				top: 320px;
				right: 20px;
				transform: translateY(-50%);
				left: 20px;
			}
		</style>